<template>
  <div class="add-function">
    <je-form-item label="表名" v-bind="validateInfos.FUNCINFO_TABLENAME">
      <!-- 这边的查询选择 -->
      <je-grid-select
        v-model:value="formState.FUNCINFO_TABLENAME"
        name="FUNCINFO_TABLENAME"
        :select-options="{ width: '1150' }"
        config-info="JE_CORE_RESOURCETABLE,FUNCINFO_TABLENAME~FUNCINFO_PKNAME,RESOURCETABLE_TABLECODE~RESOURCETABLE_PKCODE,S"
        :querys="querysArr"
        :orders="[{ code: 'SY_CREATETIME', type: 'DESC' }]"
        @select="selectFunc"
      />
    </je-form-item>
    <je-form-item label="主键名" v-bind="validateInfos.FUNCINFO_PKNAME">
      <je-input v-model:value="formState.FUNCINFO_PKNAME" placeholder=""> </je-input>
    </je-form-item>
    <!-- <je-form-item
      v-if="functionType == 'VIEW'"
      label="操作表名"
      v-bind="validateInfos.FUNCINFO_CRUDTABLENAME"
    >
      <je-grid-select
        v-model:value="formState.FUNCINFO_CRUDTABLENAME"
        name="FUNCINFO_CRUDTABLENAME"
        config-info="JE_CORE_RESOURCETABLE,FUNCINFO_CRUDTABLENAME,RESOURCETABLE_TABLECODE,S"
        :querys="[
          {
            code: 'RESOURCETABLE_ISCREATE',
            type: '=',
            value: '1',
            cn: 'and',
          },
          {
            code: 'SY_PRODUCT_ID',
            type: '=',
            value: funcStore.product.id,
            cn: 'and',
          },
        ]"
        :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
      />
    </je-form-item> -->
    <je-form-item label="功能描述">
      <je-textarea v-model:value="formState.FUNCINFO_FUNCREMARK" placeholder="" :rows="4" />
    </je-form-item>
  </div>
</template>

<script>
  import { defineComponent, reactive, watch, ref } from 'vue';
  import { Input, Form, InputSelect } from '@jecloud/ui';
  const useForm = Form.useForm;
  import { useFuncStore } from '@/store/func-store';

  export default defineComponent({
    name: 'FunctionAdd',
    components: {
      JeFormItem: Form.Item,
      JeInput: Input,
      JeTextarea: Input.TextArea,
      JeGridSelect: InputSelect.Grid,
    },
    props: {
      type: {
        type: String,
        default: 'PT',
      },
    },
    emits: ['childFormData'],
    setup(props, { emit }) {
      const funcStore = useFuncStore();
      const functionType = ref(props.type == 'VIEW' ? 'VIEW' : '');
      const querysArr = ref();
      const formState = reactive({
        FUNCINFO_TABLENAME: '',
        FUNCINFO_FUNCREMARK: '',
        FUNCINFO_CRUDTABLENAME: '',
        FUNCINFO_PKNAME: '',
        FUNCINFO_FUNCTYPE: props.type,
        FUNCINFO_FUNCNAME: '',
      });
      let rulesRef = ref({
        FUNCINFO_TABLENAME: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
        FUNCINFO_PKNAME: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
      });

      // VueEvent.on('send', (val) => {
      //   formState.FUNCINFO_TABLENAME = val.RESOURCETABLE_TABLECODE;
      // });
      watch(
        () => formState,
        (newVal) => {
          emit('childFormData', newVal);
        },
        { deep: true },
      );
      watch(
        () => props.type,
        (newVal) => {
          functionType.value = newVal == 'VIEW' ? 'VIEW' : '';
          functionType.value &&
            (querysArr.value = [
              {
                code: 'SY_PRODUCT_ID',
                type: '=',
                value: funcStore.product.id,
                cn: 'and',
              },
              { code: 'RESOURCETABLE_TYPE', type: '=', value: functionType.value },
              { code: 'RESOURCETABLE_ISCREATE', type: '=', value: '1' },
            ]);
          !functionType.value &&
            (querysArr.value = [
              {
                code: 'SY_PRODUCT_ID',
                type: '=',
                value: funcStore.product.id,
                cn: 'and',
              },
              { code: 'RESOURCETABLE_ISCREATE', type: '=', value: '1' },
            ]);
        },
        { deep: true, immediate: true },
      );

      const selectFunc = ({ rows }) => {
        if (rows && rows.length > 0) {
          const {
            RESOURCETABLE_PKCODE,
            RESOURCETABLE_TABLECODE,
            RESOURCETABLE_REMARK,
            RESOURCETABLE_TYPE,
            RESOURCETABLE_TABLENAME,
          } = rows[0];
          formState.FUNCINFO_PKNAME = RESOURCETABLE_PKCODE;
          formState.FUNCINFO_FUNCCODE = RESOURCETABLE_TABLECODE.toUpperCase();
          formState.FUNCINFO_FUNCREMARK = RESOURCETABLE_REMARK;
          formState.FUNCINFO_FUNCTYPE = RESOURCETABLE_TYPE;
          formState.FUNCINFO_FUNCNAME = RESOURCETABLE_TABLENAME;
          emit('childFormData', formState);
        }
      };
      const { validateInfos, validate } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });
      return {
        formState,
        rulesRef,
        validateInfos,
        validate,
        querysArr,
        selectFunc,
        functionType,
        funcStore,
      };
    },
  });
</script>
<style lang="less" scoped></style>
